@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  /* 主题色 - 活力渐变色系 */
  --primary: #FF3366;  /* 主色调-玫红 */
  --primary-light: #FF6B9B;
  --primary-dark: #CC295F;
  --secondary: #6236FF; /* 辅色调-紫色 */
  --secondary-light: #8B66FF;
  --secondary-dark: #4F2BCC;
  
  /* 中性色 */
  --background: #ffffff;  /* 固定为白色背景 */
  --foreground: #171717;  /* 固定为深色文字 */
  --gray-50: #F9FAFB;
  --gray-100: #F3F4F6;
  --gray-200: #E5E7EB;
  --gray-300: #D1D5DB;
  --gray-400: #9CA3AF;
  --gray-500: #6B7280;
  --gray-600: #4B5563;
  --gray-700: #374151;
  --gray-800: #1F2937;
  --gray-900: #111827;

  /* 功能色 */
  --success: #00C48C;
  --warning: #FFB800;
  --error: #FF3B3B;
  --info: #0084FF;
}

body {
  color: var(--foreground);
  background: var(--background);
  font-family: var(--font-inter), system-ui, -apple-system, sans-serif;
}

/* 自定义滚动条 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--gray-100);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb {
  background: var(--gray-300);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--gray-400);
}

/* 动画类 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.animate-fadeIn {
  animation: fadeIn 0.3s ease-in-out;
}

/* 通用组件样式 */
.btn-primary {
  @apply px-4 py-2 bg-gradient-to-r from-[#FF3366] to-[#FF6B9B] text-white rounded-lg 
    hover:from-[#FF4775] hover:to-[#FF7EAA] transition-all duration-300 
    focus:ring-2 focus:ring-pink-500 focus:ring-offset-2;
}

.btn-secondary {
  @apply px-4 py-2 bg-gradient-to-r from-[#6236FF] to-[#8B66FF] text-white rounded-lg 
    hover:from-[#6E45FF] hover:to-[#9775FF] transition-all duration-300
    focus:ring-2 focus:ring-purple-500 focus:ring-offset-2;
}

.input-primary {
  @apply block w-full rounded-lg border-gray-300 shadow-sm
    focus:border-pink-500 focus:ring-pink-500;
}

/* 卡片��式 */
.card {
  @apply bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow duration-300;
}

/* 渐变文字 */
.gradient-text {
  @apply bg-gradient-to-r from-[#FF3366] to-[#6236FF] bg-clip-text text-transparent;
}
